<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>图书详情</title>
		<link rel="stylesheet" type="text/css"  href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}" />
	</head>

	<body>
		<!--导航部分  begin-->
		<div th:replace="common/header :: header"></div>
		<!--导航部分 end-->

		<!--最顶端轮播图片 begin-->
		<div th:replace="common/carousel :: carousel"></div>
		<!--最顶端轮播图片 end-->

		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="col-md-8 col-sm-12">
				<ol class="breadcrumb">
					<li>
						<a href="#">图书详情</a>
					</li>
					<li>
						<a href="#" th:text="${book.name}">愿你的青春不负梦想</a>
					</li>
				</ol>

				<div class="row">
					<div class="col-sm-12 col-md-6">
						<div class="thumbnail">
							<a><img src="images/yuannideqingchunbufumengxiang.jpg" th:src="@{'/images/' + ${book.imgUrl}}" style="height: 200px;" alt="通用的占位符缩略图"></a>
							<div class="caption">
								<h3 th:text="${book.name}">愿你的青春不负梦想</h3>
								<p>双十一特价,包邮哟!亲<img src="images/3.gif" th:src="@{/images/3.gif}" style="width: 24px;height: 24px;"></p>
								<p>
									<div style="margin-bottom: 5px;width: 100px;">
										<input type="number" id="bookCount" class="form-control" placeholder="购买数量" min="1" max="100" onclick="selectByCount(this)">
									</div>
									<div style="clear: both;">
										<!--<input type="number" class="form-control" placeholder="请输入" min="1" max="100" onclick="selectByCount(this)">-->
										<a href="confirm_order.html" class="btn btn-default" role="button">
											<span class="glyphicon glyphicon-usd"></span> 立即购买
										</a>
										<a href="javascript:void(0)" th:onclick="addCart([[${book.id}]])" class="btn btn-default" role="button">
											<span class="glyphicon glyphicon-shopping-cart"></span> 加入购物车
										</a>
									</div>
								</p>
							</div>
						</div>
					</div>

					<div class="col-sm-12 col-md-6">
						<div class="thumbnail">
							<ul class="list-group">
								<li class="list-group-item"><span class="text-success">图书名称:<span th:text="${book.name}">愿你的青春不负梦想</span></span></li>
								<li class="list-group-item"><span class="text-info">作者:</span><span th:text="${book.author}">俞敏洪</span></li>
								<li class="list-group-item"><span class="text-info">出版日期:</span><span th:text="${#dates.format(book.publishDate,'yyyy年MM月')}">2017年01月</span></li>
								<li class="list-group-item"><span class="text-info">出版社:</span><span th:text="${book.publisher}">湖南文艺出版社</span></li>
								<li class="list-group-item"><span class="text-info" style="text-decoration: line-through;">原价:</span><span style="text-decoration: line-through;" th:text="${'$' + book.oldPrice + '元'}">$36元</span></li>
								<li class="list-group-item"><span class="text-info">现价:</span><span th:text="${'$' + book.newPrice + '元'}">$21.6元</span></li>
								<li class="list-group-item"><span class="text-info">说明:</span> <span th:text="${book.info}">50年心路历程×25年创业思考×80场演讲精华，与不甘平庸的你，谈谈如何度过不悔的青春，实现你心中的梦想。</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--<hr>-->
				<!--折叠部分 begin-->
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
							展开详细信息
						</a>
						</h4>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse">
						<div class="panel-body">
							<!--tab选项卡 begin-->
							<ul id="myTab" class="nav nav-tabs">
								<li class="active">
									<a href="#home" data-toggle="tab">
										商品详情
									</a>
								</li>
								<li>
									<a href="#ios" data-toggle="tab"> <span class="badge pull-right">50</span>累计评价</a>
								</li>
							</ul>
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade in active" id="home">
									<p>
										<em>产品参数：</em>
									</p>
									<div class="row">
										<div class="col-sm-12 col-md-6">
											<ul class="nav navbar-collapse" style="line-height: 3;">
												<li class="text-info">产品名称：<span th:text="${book.name}">愿你的青春不负梦想</span></li>
												<li class="text-info">是否是套装: <span th:text="${book.suit.getCode()} == '1' ? '是' : '否'">否</span></li>
												<li class="text-info">书名:<span th:text="${book.name}">愿你的青春不负梦想</span></li>
												<li class="text-info">定价: <span th:text="${book.oldPrice + '元'}">36.00元</span></li>
												<li class="text-info">出版社名称: <span th:text="${book.publisher}">湖南文艺出版社</span></li>
												<li class="text-info">出版时间: <span>2017年01月</span></li>
												<li class="text-info">作者: <span th:text="${book.author}">俞敏洪</span></li>
												<li class="text-info">作者地区: <span th:text="${book.authorLoc}">中国</span></li>
												<li class="text-info">ISBN编号: <span th:text="${book.isbn}">9787540478612</span></li>
											</ul>
										</div>
										<span class="visible-sm visible-xs"><hr></span>
										
									</div>
									</p>
								</div>
								<div class="tab-pane fade" id="ios">
									<p>
										<ul class="list-group">
											<li class="list-group-item"><span class="text-info">小明:</span><span class="text-success ">这真的是一本好书<img src="images/emotions/1.gif "></span></li>
											<li class="list-group-item"><span class="text-info">success:</span><span class="text-danger ">书的质量很差<img src="images/emotions/2.gif "></span></li>
											<li class="list-group-item"><span class="text-info">叶老师:</span><span class="text-success ">很值得初学者学习<img src="images/emotions/13.gif "></span></li>
											<li class="list-group-item"><span class="text-info">amdin:</span><span class="text-danger ">被坑大发了.<img src="images/emotions/17.gif "></span></li>
											<li class="list-group-item"><span class="text-info">rose:</span><span class="text-danger ">卖家态度恶劣.<img src="images/emotions/11.gif "></span></li>
										</ul>
									</p>
									<p>
										<ul class="pager">
											<li>
												<a href="# ">&larr;上一页</a>
												<a href="# ">下一页 &rarr;</a>
											</li>
										</ul>
									</p>
								</div>
							</div>
							<!--tab选项卡 end-->
						</div>
					</div>
				</div>
				<!--折叠部分end-->
			</div>

			<!--右边-->
			<div th:if="${session.user != null}"><div th:replace="common/right :: right"></div></div>
			<!--右边end-->
		</div>

		<!--首页底部信息 begin-->
		<div th:replace="common/footer :: footer"></div>

		<!--登录注册模态框-->
		<div th:replace="common/bookModal :: bookModal"></div>

		<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
		<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
		<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
		<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
		<script src="js/details.js" th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/login_reg.js}"></script>
		<script th:inline="javascript">
            var contextPath = [[${#request.getContextPath()}]];
			var user = [[${session.user}]];
		</script>
		<script type="text/javascript">
			if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
				new WOW().init();
			};

			//进入购物车
			function addCart(bookId) {
				//验证购买图书数量
				var bookNum = $("#bookCount").val();
				if(bookNum == '' || bookNum == 'undefined'){
				    alert("请输入购买数量！");
				    return;
				}
				//验证用户是否已经登录
				if(user == '' || user == null){
				    alert("请先登录！");
				    return;
				}

				//加入购物车
				$.ajax({
					url: contextPath + "/cart/add",
					data:{'count' : bookNum,'bookId' : bookId},
					method:"post",
					success:function (data) {
						if(data == 'success'){
						    //跳转到购物车列表
							window.location.href = contextPath + "/cart/list";
						}
                    }
				})
            }

		</script>
	</body>
</html>